<template>
    <div class="wel-box">
        <van-circle v-model:current-rate="currentRate"
            :clockwise="false"
            :size="40"
            @click="clickEvt"
            :stroke-width="60"
            :text="`${Math.ceil(currentRate / 20)}s`"/>
        <div class="brand">
            优蓝优选
        </div>
        <div class="title">大千世界.无所不有</div>
        <div class="right">
            千锋科技 &copy; 2023 ~ 
        </div>
    </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import { useRouter } from "vue-router";

const router = useRouter()
const currentRate = ref(100)

let timer: number = setInterval(function() {
    currentRate.value -= 1;
    if (currentRate.value < 0) {
        clearInterval(timer)
        router.push('/login')
    }
}, 50)

/** 用户点击跳转方法 */
function clickEvt() {
    clearInterval(timer)
    router.push('/login')
}
</script>

<style lang="less" scoped>
@import "../../style/common.less";

.wel-box {
    .rel();
    padding-top: 30vh;
    .van-circle {
        position: absolute;
        top: 10px;
        right: 10px;
    }
    .brand {
        font-size: 1.2rem;
        text-align: center;
        line-height: 40px;
        color: @c7;
        &::before {
            content: '';
            display: inline-block;
            vertical-align: bottom;
            width: 40px;
            height: 40px;
            background: url(../../images/logo.png) center center / 40px 40px no-repeat;
        }
    }
    .title {
        display: block;
        text-align: center;
        font-size: .7rem;
        color: @c7;
        margin-top: 20px;
    }
}
</style>